<template>
  <div class="home">
    <el-container class="home-container">
      <!--    头部-->
      <el-header>
        <div>
        <span>
          运动会管理系统
        </span>
        </div>
        <el-button type="info" @click="tuichu()">退出登录</el-button>
      </el-header>
      <el-container>
        <!--    左侧菜单栏-->

        <el-aside width="200px">
          <!--        侧边栏菜单-->
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409eff"
              unique-opened
              router
              :default-active="$router.currentRoute.path"
          >
            <!--          一级菜单-->
            <!--          防止index="1"  每一个都打开  将它改成动态的 :index="item.id"-->
            <el-submenu :index="item.id.toString()" v-for="item in menulist" :key="item.id">
              <!--            一级菜单模版区域-->
              <template slot="title">
                <!--              图标-->
                <i :class="iconsObj[item.id]"></i>
                <!--              文本-->
                <span>{{ item.authName }}</span>
              </template>
              <!--            二级菜单-->
              <el-menu-item
                  :index="'/'+subItem.path"
                  v-for="subItem in item.children"
                  :key="subItem.id"
              >
                <!--            二级菜单模版区域-->
                <!--              图标-->
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <i class="el-icon-menu"></i>
                <!--              文本-->
                <span>{{ subItem.authName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import HelloWorld from '@/components/Welcome.vue'
export default {
  name: 'HomeView',
  data(){
    return{
      //左侧菜单栏
      menulist:[
        {authName:'用户管理',id:1,order:1,path:'users',children:[
            {authName:'用户列表',id:'1-1',order:'1',path:'users'},
          ]},
        {authName:'公告管理',id:2,order:1,path:'users',children:[
            {authName:'发布公告',id:'2-1',order:'1',path:'user/xxx'},
          ]},
        {authName:'场地管理',id:3,order:1,path:'users',children:[
            {authName:'管理场地',id:'3-1',order:'1',path:'user/xxx'},
          ]},
        {authName:'器材管理',id:4,order:1,path:'users',children:[
            {authName:'管理器材',id:'4-1',order:'1',path:'user/xxx'},
          ]},
        {authName:'比赛管理',id:5,order:1,path:'users',children:[
            {authName:'管理比赛',id:'5-1',order:'1',path:'user/xxx'},
          ]},
      ],
      //一级菜单图标库
      iconsObj:{
        '1':'el-icon-user-solid',
        '2':'el-icon-s-order',
        '3':'el-icon-star-on',
        '4':'el-icon-upload',
        '5':'el-icon-phone'
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key+"1", keyPath+'2');
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //链接激活状态
    // saveNavState(activePath){
    //   this.activePath = activePath;
    // }
    tuichu(){
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.el-header{
  background-color: #5b5c5e;
  /*弹性布局*/
  display: flex;
  /* 左右贴边布局 */
  justify-content: space-between;
  /*让el-head距离左边没有空白/*/
  /*padding-left: 0;*/
  /*水平居中*/
  align-items: center;
  /*将文本颜色变成白色*/
  color: #fff;
  /*文字大小修改*/
  font-size: 30px;
}
.el-aside{
  background-color: #565c63;

}
.el-menu{
  border-right: none;
}
.el-main{
  background-color: #eaedf1;
}
.home-container{
  height: 100vh;
}
</style>

